<template>
  <v-card
    class="Search-Container pl-8 pr-4"
    flat
    tile
    height="40"
    color="#DFE1E8"
  >
    <v-row no-gutters>
      <v-col cols="3">
        <v-text-field
          v-bind="$attrs"
          v-on="$listeners"
          class="white-input rounded-pill"
          dense
          flat
          hide-details
          solo
        >
        </v-text-field>
      </v-col>
      <v-col class="ml-2 flex-grow-0">
        <v-icon class="search-icon">mdi-magnify</v-icon>
      </v-col>
      <v-spacer></v-spacer>
      <v-col class="flex-grow-0 d-flex">
        <slot name="append"></slot>
      </v-col>
    </v-row>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Search extends Vue {}
</script>
<style lang="scss" scoped>
@import "./Search.scss";
</style>
